<template>
  <h1>地图</h1>
  <el-button @click="getGas" >获取附近的加油站</el-button>
  <div id="container"></div>
  
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import axios from "axios";

var map;

onMounted(() => {
  map = new BMapGL.Map(document.querySelector("#container"));
  var point = new BMapGL.Point(116.404, 39.915);
  map.centerAndZoom(point, 15);
  map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放
  // map.setHeading(64.5);   //设置地图旋转角度
  // map.setTilt(73);       //设置地图的倾斜角度
  // map.setMapType(BMAP_EARTH_MAP);
  var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
  map.addControl(zoomCtrl);
  var opts = {
    offset: new BMapGL.Size(150, 5),
  };
  var cityCtrl = new BMapGL.CityListControl(opts); // 添加城市列表控件
  map.addControl(cityCtrl);

//   var point = new BMapGL.Point(116.404, 39.915);
//   var marker = new BMapGL.Marker(point); // 创建标注
//   map.addOverlay(marker);

  
//   var point = new BMapGL.Point(116.600, 39.915);
//   var marker = new BMapGL.Marker(point); // 创建标注
//   map.addOverlay(marker);





});

const getGas=()=>{
    
    axios.get("http://localhost:3000/gasStations")
    .then(res=>{
        res.data.forEach(item=>{
              var point = new BMapGL.Point(item.longitude,item.latitude);
              var marker = new BMapGL.Marker(point); // 创建标注
              map.addOverlay(marker);
        })

        var point = new BMapGL.Point(res.data[0].longitude, res.data[0].latitude);
        map.centerAndZoom(point, 15);
    })

}

</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100%;
}
</style>
